<template>
    <van-nav-bar
        title="基本资料"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onBack"
    />

    <div style="height: 50px;"></div>

    <div class="user">
        <div class="user-image">
            <img :src="business.avatar_cdn" alt="">
        </div>
    </div>

    <div class="form">
        <van-form @submit="onSubmit" label-align="right" colon>
            <van-field
                v-model="business.mobile"
                name="mobile"
                label="手机号"
                placeholder="手机号"
                readonly
            />

            <van-field
                v-model="business.nickname"
                name="nickname"
                label="昵称"
                placeholder="昵称"
                :rules="[{ required: true, message: '请填写昵称' }]"
            />

            <van-field
                v-model="business.email"
                type="email"
                name="email"
                label="邮箱"
                placeholder="邮箱"
                :rules="[{ required: true, message: '请填写邮箱' }]"
            />

            <van-field
                v-model="business.password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码为空不修改"
            />

            <van-field name="gender" label="性别">
                <template #input>
                    <van-radio-group v-model="business.gender" direction="horizontal">
                        <van-radio name="0">保密</van-radio>
                        <van-radio name="1">男</van-radio>
                        <van-radio name="2">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <van-field
                v-model="business.region_text"
                is-link
                readonly
                name="area"
                label="地区选择"
                placeholder="选择地区"
                @click="showRegion = true"
            />
            <van-popup v-model:show="showRegion" round position="bottom">
                <van-area
                    title="地区选择"
                    v-model="code"
                    :area-list="areaList"
                    @confirm="onConfirm"
                    @cancel="showRegion = false"
                />
            </van-popup>

            <van-field name="avatar" label="头像">
                <template #input>
                    <van-uploader v-model="avatar" :max-count="1" />
                </template>
            </van-field>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                提交
                </van-button>
            </div>
        </van-form>
    </div>

</template>

<script setup>
import { ref, getCurrentInstance, reactive } from 'vue';
import { areaList } from '@vant/area-data';

const { proxy } = getCurrentInstance();
const business = reactive(proxy.$cookies.get('business') ?? {});
const showRegion = ref(false);
const avatar  = ref([
    {
        url:business.avatar_cdn
    }
]);
const code = ref(business.district ? business.district : (business.city ? business.city : business.province));

const onSubmit = async (values) => {
    // console.log(values.avatar[0].file.name);
    let data = {
        id:business.id,
        nickname:values.nickname,
        email:values.email,
        gender:values.gender,
        code:code.value
    }

    if(values.password)
    {
        data.password = values.password;
    }

    if(values.avatar[0].file)
    {
        data.avatar = values.avatar[0].file;
    }

    let result = await proxy.$Api.profile(data);

    if(result && result.code === 1)
    {
        proxy.$showNotify({
            type:'success',
            message:result.msg,
            duration:2000,
            onClose:() => {
                proxy.$router.back();
            }
        });

        return;
    }else{
        proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:2000
        });

        return;
    }

}

const onConfirm = ({selectedOptions}) => {
    let [province, city, district] = selectedOptions;

    let region_text = '';
    let region_code = 0;

    if(province.value)
    {
        region_text = province.text + '-';
        region_code = province.value;
    }

    if(city.value)
    {
        region_text += city.text + '-';
        region_code = city.value;
    }

    if(district.value)
    {
        region_text += district.text;
        region_code = district.value;
    }

    showRegion.value = false;

    business.region_text = region_text;
    code.value = region_code;
}

const onBack = () => {
    proxy.$router.back();
}
</script>

<style>
@import url('/assets/css/profile.css');
</style>
